<template>
	<view class="wrapper">
		<view class="wrapper-title">
			相关菜谱
		</view>
		<view class="wrapper-two">

			<view class="wt-item" v-for="item in recommendList" :key="item._id">
				<image :src="item.coverpic"
					mode=""></image>
				<text>{{item.name}}</text>
				<view class="item-row">
					<view class="row-item">
						<text>{{item.pageview | valueFilter}}</text>
						<image src="../../static/img/caipusousuo_slices/mengbanzu278.png"
							mode=""></image>
					</view>
					<view class="row-item">
						<text>{{item.collections | valueFilter}}</text>
						<image src="../../static/img/caipusousuo_slices/mengbanzu279.png"
							mode=""></image>
					</view>

				</view>
			</view>

		</view>
	</view>

</template>

<script>
	export default {
		name: "menu-grid",
		props:{
			recommendList:{
				type:Array
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss"
	scoped>
	.wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 750rpx;
		background-color: #fff;
		margin-top: 28rpx;
		.wrapper-title{
			width: 750rpx;
			font-size: 30rpx;
			color: #2c2c2c;
			box-sizing: border-box;
			padding-top: 34rpx;
			padding-bottom: 6rpx;
			padding-left: 30rpx;
		}
		.wrapper-two {
			display: flex;
			flex-wrap: wrap;
			width: 750rpx;
			// height: 700rpx;
			box-sizing: border-box;
			padding: 20rpx 30rpx;
		
			.wt-item {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				width: 336rpx;
				height: 332rpx;
				margin-right: 14rpx;
				margin-bottom: 36rpx;
		
				&:nth-of-type(2n) {
					margin-right: 0;
				}
		
				image {
					width: 334rpx;
					height: 248rpx;
					border-radius: $uni-border-radius-lg;
				}
		
				text {
					width: 334rpx;
					text-align: left;
					font-size: 30rpx;
					color: $uni-text-color-1;
				}
		
				.item-row {
					width: 334rpx;
					display: flex;
					align-items: center;
		
					.row-item {
						// width: 334rpx;
						display: flex;
						align-items: center;
						margin-right: 60rpx;
		
						text {
							width: fit-content;
							font-size: 22rpx;
							color: #aaa;
							margin-right: 14rpx;
						}
		
						image {
							width: 24rpx;
							height: 24rpx;
						}
					}
				}
			}
		}
		
		
	}

	
</style>
